<template>
	<el-form :inline="true" :model="activityQuery" class="demo-form-inline" :rules="activityRules">

		<el-form-item class="ownerStyle" label="负责人">
			<el-select v-model="activityQuery.ownerId" @click="loadOwner" placeholder="请选择负责人" clearable>
				<el-option v-for="item in ownerOptions" :key="item.id" :label="item.name" :value="item.id" />
			</el-select>
		</el-form-item>

		<el-form-item label="活动名称">
			<el-input v-model="activityQuery.name" placeholder="请输入活动名称" clearable />
		</el-form-item>

		<el-form-item label="开始时间">
			<el-date-picker v-model="activityQuery.startTime" type="datetime" placeholder="请选择开始时间"
				value-format="YYYY-MM-DD HH:mm:ss" clearable />
		</el-form-item>

		<el-form-item label="结束时间">
			<el-date-picker v-model="activityQuery.endTime" type="datetime" placeholder="请选择结束时间"
				value-format="YYYY-MM-DD HH:mm:ss" clearable />
		</el-form-item>

		<el-form-item label="活动预算" prop="cost">
			<el-input v-model="activityQuery.cost" placeholder="请输入活动预算" clearable />
		</el-form-item>

		<el-form-item label="创建时间">
			<el-date-picker v-model="activityQuery.createTime" placeholder="创建时间" value-format="YYYY-MM-DD HH:mm:ss" />
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="onSearch">搜索</el-button>
			<el-button type="primary" plain @click="onReset">重置</el-button>
		</el-form-item>
	</el-form>

	<el-button type="primary" @click="add()">录入市场活动</el-button>
	<el-button type="danger" @click="batchDel()">批量删除</el-button>

	<el-table :data="activityList" style="width: 100%" @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" />
		<el-table-column type="index" label="序号" width="60" />
		<el-table-column property="ownerDo.name" label="负责人" />
		<el-table-column property="name" label="活动名称" show-overflow-tooltip />
		<el-table-column property="startTime" label="开始时间" show-overflow-tooltip />
		<el-table-column property="editTime" label="结束时间" show-overflow-tooltip />
		<el-table-column property="cost" label="活动预算" show-overflow-tooltip />
		<el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
		<el-table-column label="操作" show-overflow-tooltip>
			<template #default="scope">
				<el-button type="primary" @click="view(scope.row.id)">详情</el-button>
				<el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
				<el-button type="danger" @click="del(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @prev-click="toPage"
		@next-click="toPage" @current-change="toPage" />

</template>

<script>
	import {
		defineComponent
	} from 'vue'
	import {
		doGet
	} from '../http/httpRequest'

	export default defineComponent({
		name: "ActivityView",
		// 注入父级页面提供的所有属性、函数对象
		inject: ['reload'],


		data() {
			return {
				// 市场活动搜索表单对象
				activityQuery: {},
				// 市场活动列表对象,初始值是null
				activityList: [{
					ownerDo: {}
				}],
				// 每页条数
				pageSize: 0,
				// 数据总条数
				total: 0,
				// 负责人下拉列表数据
				ownerOptions: [{}],
				// 市场活动搜索表单验证规则
				activityRules: {
					cost: [{
						pattern: /^[0-9]+(\.[0-9]{2})?$/,
						message: '活动预算必须是整数或者两位小数',
						trigger: 'blur'
					}]
				}
			}
		},

		mounted() {
			this.getData(1)
		},

		methods: {

			// 勾选或者取消勾选时，触发该函数(已经勾选的数据会传给我们这个函数)
			handleSelectionChange(selectionDataArray) {

			},

			// 查询市场活动数据
			getData(current) {
				doGet("/api/activitys", {
					current: current,
					//带上6个搜索条件
					ownerId: this.activityQuery.ownerId,
					name: this.activityQuery.name,
					startTime: this.activityQuery.startTime,
					endTime: this.activityQuery.endTime,
					cost: this.activityQuery.cost,
					createTime: this.activityQuery.createTime,
				}).then(resp => {
					console.log(resp)
					if (resp.data.code === 200) {
						this.activityList = resp.data.data.list
						this.pageSize = resp.data.data.pageSize
						this.total = resp.data.data.total
					}
				})
			},

			toPage(current) {
				this.getData(current)
			},

			// 加载负责人
			loadOwner() {
				doGet("/api/owner", {}).then(resp => {
					if (resp.data.code === 200) {
						this.ownerOptions = resp.data.data
					}
				})
			},
			// 根据条件搜索方法
			onSearch() {
				this.getData(1);
			},
			onReset() {
				// 页面刷新
				this.reload();
			},
			// 录入市场活动
			add() {
				this.$router.push("/dashboard/activity/add")
			}
		}
	})
</script>

<style>
	.el-form {
		margin-bottom: 20px;
	}

	.el-table {
		margin-top: 12px;
	}

	.el-pagination {
		margin-top: 12px;
	}

	.ownerStyle {
		width: 15%;
	}
</style>